<template>
  <div class="app-container">

    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="普通分类" name="first">
          <div>
            <el-row :gutter="20" style="display: inline-flex;padding: 20px 0">
              <el-col style="min-width: 240px">
                <el-input
                  v-model="nomalAddDialog.key"
                  v-permission="`get:/categorize/list`"
                  placeholder="通过名称搜索"
                />
              </el-col>
            </el-row>
          </div>

          <div>
            <el-row style="display: inline-flex;padding: 20px 0" :gutter="20">
              <el-col>
                <el-button
                  v-permission="`post:/categorize/add`"
                  type="primary"
                  plain
                  icon="el-icon-plus"
                  @click.native.prevent="openNormalAdd"
                >添加
                </el-button>
              </el-col>

              <el-col>
                <el-button
                  v-permission="`post:/categorize/delete`"
                  type="danger"
                  plain
                  icon="el-icon-delete"
                  :disabled="selection.length===0"
                  @click.native.prevent="handleDelete"
                >删除
                </el-button>
              </el-col>

              <el-col>
                <el-button
                  v-permission="`post:/categorize/edite`"
                  type="success"
                  plain
                  icon="el-icon-edit"
                  :disabled="selection.length!==1"
                  @click.native.prevent="openNormalEdite"
                >编辑
                </el-button>
              </el-col>
            </el-row>

          </div>
          <el-row style="padding: 20px 0">
            <el-table
              ref="tableNormal"
              v-permission="`get:/categorize/list`"
              :data="normalListRes"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="55"
              />
              <el-table-column prop="name" label="分类名称" />
              <el-table-column v-slot="scope" label="是否导航">
                <template>
                  {{ scope.row.ifNav?"是":"否" }}
                </template>
              </el-table-column>
              <el-table-column v-slot="scope" label="图标">
                <template>
                  <img
                    v-if="scope.row.icoUrl"
                    :src="scope.row.icoUrl"
                    class="avatar"
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="推荐分类" name="second">
          <div>
            <el-row :gutter="20" style="display: inline-flex;padding: 20px 0">
              <el-col style="min-width: 240px">
                <el-input
                  v-model="reAddDialog.key"
                  v-permission="`get:/categorize/list`"
                  placeholder="通过名称搜索"
                />
              </el-col>
            </el-row>
          </div>

          <div>
            <el-row style="display: inline-flex;padding: 20px 0" :gutter="20">
              <el-col>
                <el-button
                  v-permission="`post:/categorize/add`"
                  type="primary"
                  plain
                  icon="el-icon-plus"
                  @click.native.prevent="openRecomendAdd"
                >添加
                </el-button>
              </el-col>

              <el-col>
                <el-button
                  v-permission="`post:/categorize/delete`"
                  type="danger"
                  plain
                  icon="el-icon-delete"
                  :disabled="selection.length===0"
                  @click.native.prevent="handleDelete"
                >删除
                </el-button>
              </el-col>

              <el-col>
                <el-button
                  v-permission="`post:/categorize/edite`"
                  type="success"
                  plain
                  icon="el-icon-edit"
                  :disabled="selection.length!==1"
                  @click.native.prevent="openRecomendEdite"
                >编辑
                </el-button>
              </el-col>
            </el-row>
          </div>
          <el-row style="padding: 20px 0">
            <el-table
              ref="tableRecomend"
              v-permission="`get:/categorize/list`"
              :data="recomendListRes"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="55"
              />
              <el-table-column prop="name" label="分类名称" />
              <el-table-column prop="enName" label="英文名称" />
            </el-table>
          </el-row>
        </el-tab-pane>
      </el-tabs>

      <FormDialog
        ref="reAddDialog"
        title="添加推荐分类"
        :fields="reAddDialog.fields"
        :add-form="reAddDialog.addForm"
        :handle-ok="getRecomendList"
        :submit="reAddDialog.submit"
        :rules="reAddDialog.rules"
      />

      <FormDialog
        ref="reEditeDialog"
        title="编辑推荐分类"
        :fields="reEditeDialog.fields"
        :add-form="reEditeDialog.addForm"
        :handle-ok="getRecomendList"
        :submit="reEditeDialog.submit"
        :rules="reEditeDialog.rules"
      />

      <el-dialog
        width="380px"
        :title="nomalAddDialog.title"
        :visible.sync="nomalAddDialog.show"
      >

        <el-form
          ref="addForm"
          :model="nomalAddDialog.addForm"
          :rules="nomalAddDialog.rules"
          label-width="90px"
        >
          <el-form-item prop="typeName" label="分类类型">
            <el-input value="推荐分类" disabled />
          </el-form-item>

          <el-form-item prop="name" label="分类名称">
            <el-input v-model="nomalAddDialog.addForm.name" placeholder="请输入分类名称" />
          </el-form-item>

          <el-form-item prop="ifNav" label="是否导航">
            <el-radio v-model="nomalAddDialog.addForm.ifNav" :label="true">是</el-radio>
            <el-radio v-model="nomalAddDialog.addForm.ifNav" :label="false">否</el-radio>
          </el-form-item>

          <el-form-item prop="ico" label="ico">
            <ImageUploader
              width="48px"
              height="48px"
              :url="nomalAddDialog.addForm.icoUrl"
              :path="nomalAddDialog.addForm.ico"
              @ok="function(data){
                nomalAddDialog.addForm.icoUrl=data.url;
                nomalAddDialog.addForm.ico=data.path;
              }"
            />
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="nomalAddDialog.show=false">取 消</el-button>
          <el-button type="primary" @click="handleNomalSubmit">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>

  </div>
</template>

<script>
import { getList, add, del, edite } from '@/api/pp/goods/catgorize'
import FormDialog from '@/pp-components/FormDialog.vue'
import { getToken } from '@/utils/auth'
import permission from '@/directive/permission/index.js'
import ImageUploader from '@/pp-components/ImageUploader.vue'
export default {
  components: { FormDialog, ImageUploader },
  directives: { permission },
  data() {
    return {
      activeName: 'first',
      selection: [],
      recomendList: [],
      normalList: [],
      nomalAddDialog: {
        key: undefined,
        addForm: {
          icoUrl: undefined,
          ifNav: false
        },
        rules: {},
        show: false,
        title: '添加普通分类',
        submit: add
      },
      reAddDialog: {
        key: undefined,
        addForm: {},
        submit: add,
        fields: [
          { name: 'typeName', label: '分类类型', disabled: true },
          { name: 'name', label: '分类名称' },
          { name: 'enName', label: '英文名称' }
        ],
        rules: {}
      },
      reEditeDialog: {
        addForm: {},
        submit: edite,
        fields: [
          { name: 'typeName', label: '分类类型', disabled: true },
          { name: 'name', label: '分类名称' },
          { name: 'enName', label: '英文名称' }
        ],
        rules: {}
      }
    }
  },
  computed: {
    headers() {
      return {
        Authorization: getToken()
      }
    },
    recomendListRes() {
      if (!this.reAddDialog.key) {
        return this.recomendList
      }

      return this.recomendList.filter(e => {
        return e.name && e.name.includes(this.reAddDialog.key)
      })
    },
    normalListRes() {
      if (!this.nomalAddDialog.key) {
        return this.normalList
      }

      return this.normalList.filter(e => {
        return e.name && e.name.includes(this.nomalAddDialog.key)
      })
    }
  },
  mounted() {
    this.getRecomendList()
    this.getNormalList()
  },
  methods: {
    openNormalEdite() {
      this.nomalAddDialog.title = '编辑普通分类'
      this.nomalAddDialog.addForm = this.selection[0]
      this.nomalAddDialog.submit = edite
      this.nomalAddDialog.show = true
    },
    handleAvatarSuccess(res, file) {
      console.log(res)
      this.nomalAddDialog.addForm['icoUrl'] = res.data.url
      this.nomalAddDialog.addForm['ico'] = res.data.path
      // this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      return true
    },
    openNormalAdd() {
      this.nomalAddDialog.title = '添加普通分类'
      this.nomalAddDialog.submit = add
      this.nomalAddDialog.show = true
    },
    handleNomalSubmit() {
      this.nomalAddDialog.addForm['type'] = 1
      this.nomalAddDialog.submit(this.nomalAddDialog.addForm).then(res => {
        this.$msgOk(res)
        this.getNormalList()
        this.nomalAddDialog.show = false
      })
    },
    handleDelete() {
      this.$ask({ message: '确定删除？' }).then(() => {
        const ids = []
        this.selection.forEach(e => {
          ids.push(e.cateId)
        })
        del(ids.join(',')).then(res => {
          this.$msgOk(res)
          this.getRecomendList()
          this.getNormalList()
        })
      })
    },
    handleTabClick(tab, event) {
      console.log(tab, event)
      this.selection = []
      this.$refs.tableRecomend.clearSelection()
      this.$refs.tableNormal.clearSelection()
    },
    getRecomendList() {
      getList(2).then(res => {
        this.recomendList = res.data.list
      })
    },
    getNormalList() {
      getList(1).then(res => {
        this.normalList = res.data.list
      })
    },
    handleSelectionChange(val) {
      this.selection = val
    },
    openRecomendAdd() {
      this.reAddDialog.addForm['type'] = 2
      this.reAddDialog.addForm['typeName'] = '推荐分类'
      this.$refs.reAddDialog.show()
    },
    openRecomendEdite() {
      this.reEditeDialog.addForm = this.selection[0]
      this.reEditeDialog.addForm['typeName'] = '推荐分类'
      this.$refs.reEditeDialog.show()
    }

  }

}
</script>

<style  scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
}
.avatar {
  width: 48px;
  height: 48px;
  display: block;
}
</style>
